// out: ../css/index.css

@import url(./base.less);
@import url(./variable.less);
@import url(./animation.less);

// #### 计算型变量（勿动） ####
// 小图宽高比
@img_ratio:(@img_width/@img_height);
// 外层盒子宽高
@box_width:@img_width*@img_num+@spacing*(@img_num - 1)+@box_padding*2;
@box_height:@img_height+@box_padding*2;

// #### 抽取混入  ####
// 小图公共属性
.w_h_anim {
    width: @img_width;
    height: @img_height;
    border-radius: 10px;
}
// 双龙戏珠
.w_h_ball{
    width: @ball_size;
    height: @ball_size;
    border-radius: 50%;
    background-color: @ball_color;
}

// #### index基础样式less文件  ####
// 外层盒子
.box {
    width: @box_width;
    height: @box_height;
    margin: @box_top auto;
    background-color: @box_color;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;

    // 双龙戏珠
    .anim1 {
        .w_h_anim();
        background-color: @anim1_bgc;
        display: flex;
        justify-content:space-around;
        align-items: center;
        .left {
            .w_h_ball();
            animation: ball01 @speed01 infinite alternate;
        }
        .right {
            .w_h_ball();
            animation: ball02 @speed01 infinite alternate;
        }
    }

    //涟漪
    .anim2 {
        .w_h_anim();
        background-color: @anim2_bgc;
        position: relative;
        div {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            border: 1px solid #fff;
            box-sizing: border-box;
            background-color: rgba(255,255,255,0);
            opacity: 0;
            &:nth-child(1) {
                animation: ripples @speed02 infinite;
            }
            &:nth-child(2) {
                animation: ripples @speed02 (@speed02/3) infinite;
            }
            &:nth-child(3) {
                animation: ripples @speed02 (@speed02/3)*2 infinite;
            }
            &:nth-child(4) {
                animation: ripples @speed02 @speed02 infinite;
            }
        }
    }

    //永恒的等待
    .anim3 {
        .w_h_anim();
        background-color: @anim3_bgc;
        position: relative;
        overflow: hidden;
        .out_box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: @circle_size;
            height: @circle_size;
            background-color: rgba(255,255,255,0.5);
            border-radius: 50%;
            border: (@img_width/2) solid @anim3_bgc;
        }
        .inner_box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: @circle_size - @circle_thickness;
            height: @circle_size - @circle_thickness;
            background-color: @anim3_bgc;
            border-radius: 50%;
        }
        .progress_box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: @circle_size - 10px;
            height: @circle_size - 10px;
            background-color: @progress_color;
            transform-origin:top left;
            transform:rotate(0deg);
            animation: waiting @speed03 infinite linear;
        }
    }
}